/* General ---------------------------------------------------------------- */

/* Default light theme */
:root,
:root.light {
  /* Font declarations */
  --sans-font: Noto Sans, Helvetica, sans-serif;
  --mono-font: Noto Mono, Courier, monospace;

  /* Effect transitions */
  --link-trans: color 0.5s, background 0.5s, ease-in-out;
  --img-trans: opacity 0.5s ease-in-out;

  /* Palette */
  --orange: #ff851b;
  --dark-orange: #c27d42;
  --light-gray: #c8c8c8; /* (HS)L: 200/255 */
  --gray: #808080; /* (HS)L: 128/255 */
  --gray-240: #f0f0f0; /* (HS)L: 240/255 */
  --gray-100: #646464; /* (HS)L: 100/255 */
  --gray-50: #323232; /* (HS)L: 50/255 */

  /* Sections */
  --bg-color: #ddf;
  --text-color: var(--gray-100);
  --heading-color: var(--gray-100);
  --link-color: var(--orange);
  --link-hover-color: var(--gray-50);
  --link-visited-color: var(--dark-orange);
  --nav-link-color: var(--gray);
  --nav-link-hover-color: var(--orange);
  --main-title-link-color: var(--link-color);
  --main-title-link-hover-color: var(--link-hover-color);
  --toc-title-color: var(--gray);
  --toc-bg-color: var(--gray-240);
  --toc-link-color: var(--link-color);
  --toc-link-hover-color: var(--link-hover-color);

  /* Syntax highlighting */
  --code-border-color: var(--light-gray);
  --code-bg-color: var(--gray-240);
  --code-text-color: var(--gray);
  --code-error-color: #c60901;
  --code-datatype-color: var(--gray-50);
  --code-string-color: var(--orange);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--sans-font);
  font-size: 62.5%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  word-wrap: break-word;
}
h1 {
  margin: 4rem 0 2rem;
  font-size: 2.8rem;
}
h2 {
  margin: 3rem 0 1.5rem;
  font-size: 2.4rem;
}
h3 {
  margin: 3rem 0 1.5rem;
  font-size: 2.2rem;
}

a {
  font-weight: 500;
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
  transition: var(--link-trans);
}
a:visited {
  color: var(--link-visited-color);
}

code {
  font-family: var(--mono-font);
}

tr td {
  border-bottom: 1px dotted #07c;
}

/* Sections --------------------------------------------------------------- */

.header {
  margin: 5rem auto;
}

.header-title {
  text-align: center;
  margin: 0 auto 1.6rem;
  font-size: 3.8rem;
}

.nav {
  margin: 0 auto;
}
.nav__link {
  font-size: 2rem;
  font-weight: 400;
  color: var(--nav-link-color);
}
.nav__link:hover {
  color: var(--nav-link-hover-color);
}

.main {
  font-size: 1.6rem;
  word-wrap: break-word;
}

.main-title {
  font-size: 2.6rem;
}

.main-title a {
  color: var(--main-title-link-color);
}
.main-title a:hover {
  color: var(--main-title-link-hover-color);
}

.main p {
  margin: 1.5rem 0;
}

.main ol {
  margin: 0 0 0 2rem;
}
.main ol li {
  margin: 1rem 0;
}

.main ul {
  list-style: disc outside;
  margin: 0 0 0 2rem;
}
.main ul li {
  margin: 1rem 0;
}
.main ul li p {
  margin: 0;
}
.main ul li ul li {
  margin: 0 0 0 2.6rem;
}

.toc {
  margin: 2rem 0 4rem;
  background: var(--toc-bg-color);
  border-radius: 0.5rem;
}

.toc-title {
  margin: 0 0 1rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--toc-title-color);
}

.toc a {
  font-weight: 400;
  color: var(--toc-link-color);
}
.toc a:hover {
  color: var(--toc-link-hover-color);
}

.toc ul {
  list-style: none;
}
.toc ul li:before {
  content: unset;
}
.toc ul li ul li {
  margin: 0 0 0 1.2rem;
}
.toc ul li ul li ul li {
  margin: 0 0 0 2.6rem;
}

.footer {
  margin: 4rem auto;
  font-size: 1.2rem;
}

.footer p {
  margin: 1rem 0;
  text-align: center;
}

.footer a[rel="license"]:hover {
  background: none;
}
.footer a[rel="license"] img {
  margin: 1rem auto;
  border: 0;
  opacity: 0.8;
}
.footer a[rel="license"] img:hover {
  opacity: 1;
  transition: var(--img-trans);
}

/* Syntax highlighting ---------------------------------------------------- */

div.sourceCode {
  padding: 0 1rem;
  border-top: 1.2rem solid var(--code-border-color);
  border-radius: 0.5rem;
  background: var(--code-bg-color);
}
pre.sourceCode {
  padding: 2rem 0;
  background: var(--code-bg-color);
  overflow: auto;
}
.sourceLine,
.sourceLine:hover {
  background: var(--code-bg-color);
  color: var(--code-text-color);
}
.sourceCode .er {
  color: var(--code-error-color);
}
.sourceCode .dt {
  color: var(--code-datatype-color);
}
.sourceCode .st {
  color: var(--code-string-color);
}

/* Indentation adjustment hack */
code.sourceCode span[id^="cb"] {
  margin: 0 0 0 -4rem;
}
code.sourceCode:first-child {
  margin: 0 0 0 4rem;
}
code.sourceCode .dt {
  margin: 0 0 0 -2rem;
}

/* Media queries ---------------------------------------------------------- */

@media (max-width: 689px) {
  .header,
  .main,
  .footer {
    padding: 0 2rem;
  }

  /* Scale header logo */
  .header-title img {
    max-width: 90%;
    position: relative;
    object-fit: cover;
    object-position: center;
  }

  /* Stack nav items */
  .nav {
    width: 18rem;
  }
  .nav__link {
    display: block;
  }

  /* TOC spans full width */
  .toc {
    margin: 0 -2rem;
    padding: 4rem 2rem;
  }
}

@media (min-width: 690px) {
  .header,
  .main,
  .footer {
    padding: 0 5rem;
  }

  /* Horizontal nav */
  .nav {
    text-align: center;
  }
  .nav__link {
    margin: 0 1rem;
    display: inline;
  }

  /* TOC is 45% of min-width */
  .toc {
    margin: 0;
    padding: 4rem;
    width: 31rem;
  }
}

@media (min-width: 960px) {
  /* Center sections, set fixed width */
  .header,
  .main,
  .footer {
    width: 95rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Dark theme ------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    /* Palette */
    --orange: #ff851b;
    --dark-orange: #c27d42;
    --light-gray: #c8c8c8; /* (HS)L: 200/255 */
    --gray: #808080; /* (HS)L: 128/255 */
    --gray-50: #332043;
    --gray-35: #232323; /* (HS)L: 35/255 */

    /* Sections */
    --bg-color: var(--gray-50);
    --text-color: var(--light-gray);
    --heading-color: var(--light-gray);
    --link-color: var(--orange);
    --link-hover-color: var(--light-gray);
    --link-visited-color: var(--dark-orange);
    --nav-link-color: var(--light-gray);
    --nav-link-hover-color: var(--orange);
    --main-title-link-color: var(--link-color);
    --main-title-link-hover-color: var(--link-hover-color);
    --toc-title-color: var(--gray);
    --toc-bg-color: var(--gray-35);
    --toc-link-color: var(--link-color);
    --toc-link-hover-color: var(--link-hover-color);

    /* Syntax highlighting */
    --code-border-color: #ed9c55; /* light orange */
    --code-bg-color: var(--gray-35);
    --code-text-color: #555; /* (HS)L: 85/255 */
    --code-error-color: #c60901; /* red */
    --code-datatype-color: var(--gray);
    --code-string-color: #ed9c55;
  }
}

/* Repeat inside a .dark class to continue to support theme selection links in
 * the nav. The .dark and .light classes allow users to override the media
 * query-detected setting via the selection links if desired. */
:root.dark {
  /* Palette */
  --orange: #ff851b;
  --dark-orange: #c27d42;
  --light-gray: #c8c8c8; /* (HS)L: 200/255 */
  --gray: #808080; /* (HS)L: 128/255 */
  --gray-50: #332043;
  --gray-35: #232323; /* (HS)L: 35/255 */

  /* Sections */
  --bg-color: var(--gray-50);
  --text-color: var(--light-gray);
  --heading-color: var(--light-gray);
  --link-color: var(--orange);
  --link-hover-color: var(--light-gray);
  --link-visited-color: var(--dark-orange);
  --nav-link-color: var(--light-gray);
  --nav-link-hover-color: var(--orange);
  --main-title-link-color: var(--link-color);
  --main-title-link-hover-color: var(--link-hover-color);
  --toc-title-color: var(--gray);
  --toc-bg-color: var(--gray-35);
  --toc-link-color: var(--link-color);
  --toc-link-hover-color: var(--link-hover-color);

  /* Syntax highlighting */
  --code-border-color: #ed9c55; /* light orange */
  --code-bg-color: var(--gray-35);
  --code-text-color: #555; /* (HS)L: 85/255 */
  --code-error-color: #c60901; /* red */
  --code-datatype-color: var(--gray);
  --code-string-color: #ed9c55;
}
